import React from 'react';
import './weightDetail.scss';
import cookie from 'react-cookies';
import { List, Tabs, Row, Col,Select,DatePicker,Table,Button,Input } from 'antd';
import { poundList } from '../../../api/dataCenter'
import Pagination from '../../../component/Pagination/Pagination.js';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { Column } = Table;


class weightDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            project_id: this.props.location.search.split('?')[1],
            stateVal: undefined,
            gateType: undefined,
            keyWord:'',
            pageSize: 10,
            total_count: 0,
            current: 1,
            dataSource : [],
        }
    }
    componentDidMount() {
        console.log(this.props)
        console.log('项目ID', this.props.location.search)
        this.getList()
    }
    componentDidUpdate(prevProps) {

        const { search } = this.props.location;
        console.log('项目ID--', prevProps.location.search, search)
        if (prevProps.location.search !== search) {
            this.setState({
                project_id: search.split('?')[1]
            }, () => {
                this.getList()
            })
        }
    }
    
    //获取记录列表
    getList = () => {
        const { project_id, stateVal, gateType, keyWord, current } = this.state;
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'project_id': project_id,
            'state': stateVal,
            'truck_type': gateType,
            'search_text': keyWord,
            'page': current
        }
        console.log(post_data)
        poundList(post_data).then(res => {
            console.log(res)
            const total_list = [...res.data.data_list]
            const new_total_list = []
            total_list.forEach((item, i) => {
                new_total_list.push({
                    key: item.id * 2,
                    type_name: '毛重',
                    ...item
                })
                new_total_list.push({
                    key: item.id * 2 + 1,
                    type_name: '皮重',
                    ...item
                })
            })
            console.log(new_total_list)
            this.setState({
                total_count: res.data.total_count,
                dataSource: new_total_list
            })
        })
    }
    //白名单类型
    handleType = value => {
        this.setState({
            gateType: value
        })
    }
    //白名单状态
    handleState = value => {
        this.setState({
            stateVal: value
        })
    }
    //条件搜索
    onChangeInput = (e) => {
        this.setState({
            keyWord: e.currentTarget.value
        })
    }
    //查询按钮
    search = () => {
        const { pageType } = this.state;
        console.log(pageType)
        this.setState({
            current: 1
        }, () => {
            this.getList()
        })
    }
    //清空按钮
    clear = () => {
        console.log('--')
        this.setState({
            stateVal: undefined,
            gateType: undefined,
            keyWord: '',
        },()=>{
            this.getList()
        })
    }
    //分页获取数据
    setPaginationPage = pageNumber => {
        console.log('Page: ', pageNumber);
        this.setState({
            current: pageNumber
        }, () => {
            this.getList()
        })
    }
    renderContent = (value, row, index, itemValue) => {
        const obj = {
            children: itemValue,
            props: {},
        };
        const { dataSource } = this.state;
        let num = 0;
        dataSource.forEach(item => {
            if (row.id === item.id) {
                num++
            }
        })
        if (index === 0) {
            obj.props.rowSpan = num;
        } else if (row.id !== dataSource[index - 1].id) {
            obj.props.rowSpan = num;
        } else {
            obj.props.rowSpan = 0;
        }
        return obj;
    };

    render() {
        const { stateVal, gateType, keyWord, dataSource, pageSize, total_count, current  } = this.state;
        return (
            <div className="weightCon">
                <div className="tipss">
                    <span className="blue"></span>
                    <span>称重数据</span>
                </div>
                <Row>   
                    <Col span={12}>
                        <span className="tit">白名单类型：</span>
                        <Select value={gateType} size="small" placeholder="请选择白名单类型" onChange={this.handleType.bind(this)} allowClear>
                            <Option value="2">云排号</Option>
                            <Option value="1">本地排号</Option>
                        </Select>
                    </Col>
                    <Col span={12}>
                        <span className="tit">白名单状态：</span>
                        <Select value={stateVal} size="small" placeholder="请选择白名单状态" onChange={this.handleState.bind(this)} allowClear>
                            <Option value="1">已取号候场中</Option>
                            <Option value="2">已叫号</Option>
                            <Option value="4">站内作业中</Option>
                            <Option value="5">已卸货出站</Option>
                            <Option value="6">过期销号</Option>
                        </Select>
                    </Col>
                </Row>
                <Row>
                    <Col  span={16}>
                        <span className="tit">关键词：</span>
                        <Input placeholder="可根据 车牌号/编号 进行搜索" value={keyWord} onChange={this.onChangeInput} />
                    </Col>
                    <Col span={8} className="bottom">
                        <Button className="search" onClick={this.search}>查询</Button>
                        <Button className="toClear" onClick={this.clear}>重置</Button>
                    </Col>
                </Row>
                <Row className="table">
                    <Col span={24}>
                        <Table dataSource={dataSource} pagination={false} rowKey={record => record.key} scroll={{ x: '100%' }} locale={{ emptyText: '暂无数据' }}>
                            <Column title="白名单" render={(value, item, index) => this.renderContent(value, item, index, item.truck_number)} width='150px' key='1' />
                            <Column title="白名单类型" render={(value, item, index) => this.renderContent(value, item, index, item.truck_type === 1 ? '本地排号' : '云排号')} width='150px' key='2' />
                            <Column title="车牌号" render={(value, item, index) => this.renderContent(value, item, index, item.plate_number)}dataIndex="plate_number" width='150px' key='3' />
                            <Column title="称重类型" dataIndex="type_name" width='150px' key='4' />
                            <Column title="称重重量" render={item => item.type_name === '毛重' ? item.gross_weight + '吨' : item.tare_weight+'吨'} width='150px' key='5' />
                            <Column title="称重磅房" render={item => item.type_name === '毛重' ? `0${item.gross_lane_num}号` : `0${item.tare_lane_num}号`} width='150px' key='6' />
                            <Column title="称重时间" render={item => item.type_name === '毛重' ? item.gross_time : item.tare_time} width='100px' key='7' />
                            <Column title="煤种" render={(value, item, index) => this.renderContent(value, item, index, item.coal_name)} width='100px' key='8' />
                            <Column title="净重重量" render={(value, item, index) => this.renderContent(value, item, index, item.net_weight)} width='150px' key='9' />
                            <Column title="车辆性质" render={(value, item, index) => this.renderContent(value, item, index, item.truck_number)} width='150px' key='10' />
                            <Column title="" width="0px" key="11" fixed="right" />
                        </Table>
                    </Col>
                </Row>
                <Pagination pageSize={pageSize} total={total_count} current={current} getChangeData={this.setPaginationPage.bind(this)} />
            </div>
           
        )
    }
}

export default weightDetail;